<template>
    <!-- <fui-bottom-popup :show="show" @close="closePopup">
        <view class="fui-custom__wrap">
        <fui-input borderTop placeholder="请输入用户名"></fui-input>
        </view>
    </fui-bottom-popup> -->
  
    <view class="top">
      <view class="top-title">请完善信息</view>
      <view class="top-subtitle">如实填写信息，获取更优质的功能和服务</view>
    </view>
    <fui-form :formData="formData" @submit="submit" >
    <view class="center-top radius">
      <view class="line"></view>
      <view class="center-top-item" @click="chooseAvatar">
      <fui-form-item prop="formData[0].image">
        <view class="content">
          <view class="left">企业商标</view>
          <view class="right">
            <image class="right-img" :src="formData.image"></image>
            <view  ><image class="avtar-label"
              src="/src/static/tabs/arrow.png"
            /></view>
          </view>
        </view>
        <!-- <view class="line"></view> -->
      </fui-form-item>
      </view>
      <view class="center-top-item" >
      <fui-form-item  :prop="formData.name">
        <view class="content" >
          <view class="left">企业全称</view>
          <view class="right">
            <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.name"></fui-input>
          </view>
        </view>
        <!-- <view class="line"></view> -->
      </fui-form-item>
      </view>
      <view class="center-top-item" >
      <fui-form-item  :prop="formData.license_num">
        <view class="content" >
          <view class="left">机构代码</view>
          <view class="right">
            <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.license_num"></fui-input>
          </view>
        </view>
        <!-- <view class="line"></view> -->
      </fui-form-item>
      </view>
      <view class="center-top-item" >
      <fui-form-item  :prop="formData.legal">
        <view class="content" >
          <view class="left">公司法人</view>
          <view class="right">
            <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.legal"></fui-input>
          </view>
        </view>
        <!-- <view class="line"></view> -->
      </fui-form-item>
      </view>
      <view class="center-top-item" >
      <fui-form-item  :prop="formData.company_scale">
        <view class="content" >
          <view class="left">企业规模</view>
          <view class="right">
            <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.company_scale"></fui-input>
          </view>
        </view>
        <!-- <view class="line"></view> -->
      </fui-form-item>
      </view>
      <view class="center-top-item" >
      <fui-form-item  :prop="formData.category_id_f">
        <view class="content" >
          <view class="left">所属行业</view>
          <view class="right">
            <fui-picker  :show="showCategoryF" 
             @change="confrimcategoryF"
             @cancel="closeSelectCategoryF" btnSize="28" size="16" :options="types.map(type => type.label)" >
            </fui-picker>
            <view class="picker" @click="openSelectCategoryF">
                <fui-input disabled="true"  maxlength="-1" textAlign="right" size="22" style="margin-right:-10rpx;" :value="formData.category_id_f" class="right-text">
                    <image class="label"
                     src="/src/static/tabs/arrow.png"
                    />
                </fui-input>
            </view>
          </view>
        </view>
        <!-- <view class="line"></view> -->
      </fui-form-item>
      </view>
      <view class="center-top-item" >
      <fui-form-item  :prop="formData.category_id_c">
        <view class="content" >
          <view class="left">归属分类</view>
          <view class="right">
            <fui-picker  :show="showCategoryC" 
             @change="confrimcategoryC"
             @cancel="closeSelectCategoryC" btnSize="28" size="16" :options="types.map(type => type.label)" >
            </fui-picker>
            <view class="picker" @click="openSelectCategoryC">
                <fui-input disabled="true"  maxlength="-1" textAlign="right" size="22" style="margin-right:-10rpx;" :value="formData.category_id_c" class="right-text">
                    <image class="label"
                     src="/src/static/tabs/arrow.png"
                    />
                </fui-input>
            </view>
          </view>
        </view>
        <!-- <view class="line"></view> -->
      </fui-form-item>
      </view>
      <view class="center-top-item" >
      <fui-form-item  :prop="formData.operate">
        <view class="content" >
          <view class="left">经营内容</view>
          <view class="right">
            <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.operate"></fui-input>
          </view>
        </view>
        <!-- <view class="line"></view> -->
      </fui-form-item>
      </view>
      <view class="center-top-item" >
      <fui-form-item  :prop="formData.address">
        <view class="content" >
          <view class="left">详细地址</view>
          <view class="right">
            <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.address"></fui-input>
          </view>
        </view>
        <!-- <view class="line"></view> -->
      </fui-form-item>
      </view>
      <view class="center-top-item" >
      <fui-form-item  :prop="formData.tel">
        <view class="content" >
          <view class="left">企业电话</view>
          <view class="right">
            <fui-input maxlength="-1" textAlign="right" size="22" style="margin-right:10rpx;"  v-model="formData.tel"></fui-input>
          </view>
        </view>
        <!-- <view class="line"></view> -->
      </fui-form-item>
      </view>
    </view>
      <view class="button-container" @click="submit">
        <view class="my-button">
          提交修改
        </view>
      </view>
    </fui-form>
  
  </template>
  
  <script lang="ts" setup>
  // 这里可以添加你的 TypeScript 逻辑
  import { onLoad } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  import sheep from '@/sheep';
  const formData = ref(
  {
    id: 2,
    name: "",
    license_num: "",
    legal: "",
    company_scale:"",
    reg_time: "2013--15",
    economic_type: "",
    category_id_f:null ,
    category_id_c: null,
    operate: "",
    city: 2,
    county: 3,
    address: "",
    tel: null,
    image:""
  });
  const types = ref([
    {
      label: '住宅',
      value: '住宅'
    },
    {
      label: '客运车站、码头、机场',
      value: '客运车站、码头、机场'
    },
    {
      label: '商场（市场）、宾馆（饭店）、体育场（馆）、会堂、公共娱乐场所等公众聚集场所',
      value: '商场（市场）、宾馆（饭店）、体育场（馆）、会堂、公共娱乐场所等公众聚集场所'
    },
    {
      label: '医院、养老院、学校、托儿所、幼儿园',
      value: '医院、养老院、学校、托儿所、幼儿园'
    },
      {
        label: '国家机关单位',
        value: '国家机关单位'
      },
      {
        label: '公共图书馆、展览馆、博物馆、档案馆、文物保护单位',
        value: '公共图书馆、展览馆、博物馆、档案馆、文物保护单位'
      }
  ]);
  const showCategoryF = ref(false);
  const showCategoryC = ref(false);
  
  const openSelectCategoryC = () => {
    showCategoryC.value = true;
  };
  
  const openSelectCategoryF = () => {
    showCategoryF.value = true;
  };
  const closeSelectCategoryC= () => {
    showCategoryC.value = false;
  };
  
  const closeSelectCategoryF = () => {
    showCategoryF.value = false;
  };
  const confrimcategoryC = (e) => {
    formData.value.category_id_c = e.value;
    console.log("formData.value.category_id_c",formData.value.category_id_c);
    closeSelectCategoryC();
  };
  const confrimcategoryF = (e) => {
    formData.value.category_id_f = e.value;
    console.log("formData.value.category_id_f",formData.value.category_id_f);
    closeSelectCategoryF();
  };
  //选择头像
  const chooseAvatar = async () => {
    try {
      const res = await uni.chooseImage({
        count: 1, // 最多选择1张
        sizeType: ['compressed'], // 压缩图
        sourceType: ['album'], // 从相册选择
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          // 这里可以添加上传逻辑
          // uploadAvatar(tempFilePaths[0]);
        }
      });
    } catch (err) {
      // handleImageError(err);
    }
  };
  
  //获取页面详细信息
  const qyDetail = (id) =>{
    const params = {
      c_id : id
    }
    sheep.$api.qy_index.detail(params).then(res => {
      if(res.code === 200){
        formData.value.id = res.data._id;
        formData.value.name = res.data.c_name;
        formData.value.license_num = res.data.c_license_num;
        formData.value.legal = res.data.c_legal;
        formData.value.company_scale="大型企业"
        formData.value.address= res.data.c_reg_adress;
        formData.value.reg_time= res.data.c_reg_time;
        formData.value.economic_type= res.data.c_economic_type;
        formData.value.category_id_f = "住宅";
        formData.value.category_id_c = res.data.category_id_c;
        formData.value.operate= res.data.c_operate;
        formData.value.city= res.data.city;
        formData.value.county= res.data.county;
        formData.value.tel= res.data.c_tel;
      }
    })
  }
  
  onLoad((options) => {
      const companyId = options.companyId;
      qyDetail(companyId)
    });
  
  //提交修改
  const  submit = () => {
  console.log(formData)
  }
  </script>
  
  <style scoped>
  .fui-custom__wrap {
      width: 100%;
      height: 520rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    z-index: -2;
  }
  page {
    background: #fff;
    height: 100%;
  }
  
  .radius {
    border-radius: 3%;
  }
  
  .top {
    text-align: center;
    margin: 100rpx auto;
  }
  
  .top-title {
    font-size: 32rpx;
    font-weight: 600;
    margin: 60rpx auto;
  }
  
  .top-subtitle {
    margin: 20rpx auto;
    font-size: 26rpx;
  }
  
  .center-top {
    font-weight: 600;
    width: 100%;
    margin: 30rpx auto 0rpx auto;
    padding-bottom: 5rpx;
  }
  
  .center-title {
    display: flex;
    justify-content: space-between;
    padding-top: 10rpx;
    margin: 0 20rpx;
  }
  
  .center-title-left {
    font-weight: 600;
  }
  
  .center-top-item {
    font-size: 22rpx;
    line-height: 90rpx;
  
  }
  
  .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #00000017;/* 确保边框样式正确 */
    padding: 0 20rpx 0rpx 20rpx;
  }
  
  .left {
    display: flex;
    min-width: 200rpx;
  }
  
  .right {
    display: flex;
    color: #666;
  }
  .picker{
    display: flex;
  }
  .right-text {
    height: 90rpx;
    width:440rpx;
    margin-right: 30rpx;
  }
  .label{
    position: relative;
    top: 0rpx;
    width: 22rpx;
    height: 22rpx;
  }
  .avtar-label{
    position: relative;
    top: 3rpx;
    left: -18rpx;
    width: 22rpx;
    height: 22rpx;
  }
  .right-img {
    width: 70rpx;
    height: 70rpx;
    position: relative;
    top: 10rpx;
    right: 45rpx;
  }
  
  .line {
    width: 100%;
    height: 1rpx;
    background-color: #00000017;
    margin: 0rpx auto 0rpx auto;
  }
  
  .center-edit {
    font-size: 24rpx;
    color: #666;
  }
  
  .button-container {
    display: flex;
    justify-content: center;
  }
  
  .my-button {
    margin-top: 150rpx;
    width: 50%;
    border-radius: 30rpx;
    height: 70rpx;
    background-color: #0038b1;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 3px 3px 5px rgba(164, 161, 161, 0.5);
  }
  </style>
  